<template>
  <div class="container">
    <base-title base-title="说说评论列表" />
    <base-table
      :total="commentMessageTotal"
      :structure="commentMessageListSc"
      :data="commentMessageListData"
      :form-options="commentMessageSearchForm"
      btn-items="search,reset,export"
      @on-search="onSearch"
      @on-reset="onReset"
      @current-page-change="handleCurrentPageChange"
    >
      <template #operation="{ scope }">
        <el-button type="danger" :icon="Delete" text @click="deleteMessageComment(scope.row.id)">删除</el-button>
      </template>
    </base-table>
  </div>
</template>

<script lang="ts" setup name="commentMessage">
  import { ref, onBeforeMount, reactive } from 'vue'
  import { Delete } from '@element-plus/icons-vue'
  import { ElMessageBox } from 'element-plus'
  import { commentMessageListSc, commentMessageSearchForm } from '@/components/base-table/config'
  import { queryMessageCommentRequest, deleteMessageCommentRequest, searchMessageCommentRequest } from '@/network/api/comment-api'
  import baseTable from '@/components/base-table/baseTable.vue'
  import formatUtcTime from '@/utils/formatTime'
  import notification from '@/utils/notification'
  const commentMessageListData = ref([]) // 说说评论列表数据
  const commentMessageTotal = ref<number>(0) // 说说评论数量
  const hasSearchParam = ref(false) // 搜索状态记录
  let searchInfo = reactive({}) // 搜索参数记录

  // 搜索事件处理
  const onSearch = async (formData: any) => {
    hasSearchParam.value = true
    searchInfo = formData
    const result = await searchMessageCommentRequest(formData)
    commentMessageListData.value = result.result.data
    commentMessageListData.value.forEach((item: any) => {
      item.createAt = formatUtcTime(item.createAt)
      item.type = item.comment_id ? `回复@ ${item.reply_comment_nickname}` : '评论'
    })
    commentMessageTotal.value = result.result.total
  }
  // 重置事件处理
  const onReset = async () => {
    hasSearchParam.value = false
    searchInfo = {}
    await commentMessageListPageInit()
  }
  const commentMessageListPageInit = async (currentPage: number = 1) => {
    const result = await queryMessageCommentRequest(currentPage)
    commentMessageListData.value = result.result.data
    commentMessageListData.value.forEach((item: any) => {
      item.createAt = formatUtcTime(item.createAt)
      item.type = item.comment_id ? `回复@ ${item.reply_comment_nickname}` : '评论'
    })
    commentMessageTotal.value = result.result.total
  }

  onBeforeMount(async () => {
    await commentMessageListPageInit()
  })

  const deleteMessageComment = async (id: number) => {
    const reslt = await ElMessageBox.confirm('确定删除吗？', 'Warning', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).catch(err => err)
    if (reslt === 'cancel') {
      return notification.info('再想想~')
    } else if (reslt === 'confirm') {
      const result = await deleteMessageCommentRequest(id)
      notification.success(result.msg)
      await commentMessageListPageInit()
    }
  }

  const handleCurrentPageChange = async (currentPage: number) => {
    if (hasSearchParam.value) {
      const result = await searchMessageCommentRequest(searchInfo, currentPage)
      commentMessageListData.value = result.result.data
      commentMessageListData.value.forEach((item: any) => {
        item.createAt = formatUtcTime(item.createAt)
        item.type = item.comment_id ? `回复@ ${item.reply_comment_nickname}` : '评论'
      })
      commentMessageTotal.value = result.result.total
    } else {
      await commentMessageListPageInit(currentPage)
    }
  }
</script>

<style scoped></style>
